<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 第一步，导入vue包 -->
		<script src="js/vue2.6.10.js"></script>
	</head>
	<body>
		<!-- 穿件一个要控制的区域 -->
		<div id="app">
			<input type="button" name="" id="" value="浪起来" @click="lang" />
			<input type="button" name="" id="" value="低调" @click="stop" />

			<h4>{{msg}}</h4>
		</div>
	</body>
	<script>
		// 在vm实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的方法,必须通过this.数据属性名  或者this.方法名 来进行访问,这里的this,就表示我们 new 出来的 vm实例对象
		var vm = new Vue({
			el: "#app",
			data() {
				return {
					msg: "猥琐发育，别浪~~！稳住，我们能赢",
					intervalId: null //在data上定义  定时器ID
				}
			},
			methods: {
				lang() {

					if (this.intervalId != null) {
						return
					}
					console.log(this.msg)
					// 获取到开始的第一个字符

					this.intervalId = setInterval(() => {
						var start = this.msg.substring(0, 1)
						// 获取到后面的所有字符
						var end = this.msg.substring(1)
						// 重新拼接得到新的字符串,并复制给 this.msg
						this.msg = end + start
					}, 400)

					// vm实例会监听自己身上的data 中所有的数据的改变,只要数据一发生比哪壶啊,就会自动把最新的数据,从data是上同步到页面中去    [好处是：程序员只需要关心数据，不需要关心如何渲染到页面]




				},
				stop() {
					clearInterval(this.intervalId)
					this.intervalId=null
				}
			}
		})


		// 分析
		// 1:先给[浪起来]按钮添加点击事件   v-on
		// 2:在按钮的时间处理函数中,写相关的业务逻辑代码.拿到msg字符串,然后调用字符串的substring方法来警醒字符串的截取操作,把第一个字服截取出来放到最后一个位置
		// 3:为了实现点击一下按钮自动截取的功能,需要把2步骤中的代码放在一个定时器里面去
	</script>
</html>
